<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BootStrap  Demo</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
/* 公共样式 S */
body{margin:20px 20px 20px 20px}
h1, h2, h3, .masthead p, .subhead p, .marketing h2, .lead {font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microsoft YaHei",SimHei,"宋体",simsun,sans-serif;font-weight: normal;}
/* 公共样式 E */
/* 用于栅格系统示例的样式 S */
.show-grid [class*="span"] {
    background-color: #EEEEEE;
    border-radius: 3px 3px 3px 3px;
    line-height: 40px;
    min-height: 40px;
    text-align: center;
}
.show-grid {
    margin-bottom: 20px;
    margin-top: 10px;
}
.show-grid [class*="span"]:hover {
    background-color: #DDDDDD;
}
.show-grid [class*="span"] [class*="span"] {
    background-color: #CCCCCC;
}
.show-grid .show-grid [class*="span"] {
    margin-top: 5px;
}
.show-grid [class*="span"] [class*="span"] [class*="span"] {
    background-color: #999999;
}
/* 用于栅格系统示例的样式 E */
/* 用于表达的样式 S */
.bs-docs-example:after {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #9DA0A4;
    content: "示例：";
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 3px 7px;
    position: absolute;
    top: -1px;
}
form.bs-docs-example {
    padding-bottom: 19px;
}
.bs-docs-example {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    margin: 15px 0;
    padding: 39px 19px 14px;
    position: relative;
}
.bs-docs-example-submenus .dropup > .dropdown-menu, .bs-docs-example-submenus .dropdown > .dropdown-menu {
    display: block;
    margin-bottom: 5px;
    position: static;
}
.bs-docs-example-submenus {
    min-height: 180px;
}
/* 用于表达的样式 E */
</style>
<body>
<!--  栅格系统示例 S -->
<!-- Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。 -->
<section>
	<h2>栅格系统示例</h2>
    <div class="row show-grid">
        <div class="span1" data-original-title="" title="">1</div>
        <div class="span1" data-original-title="" title="">1</div>
        <div class="span1" data-original-title="" title="">1</div>
        <div class="span1" data-original-title="" title="">1</div>
        <div class="span1" data-original-title="" title="">1</div>
        <div class="span1" data-original-title="" title="">1</div>
        <div class="span1" data-original-title="" title="">1</div>
        <div class="span1" data-original-title="" title="">1</div>
        <div class="span1" data-original-title="" title="">1</div>
    </div>
	<div class="row show-grid">
          <div class="span2" data-original-title="" title="">2</div>
          <div class="span3" data-original-title="" title="">3</div>
          <div class="span4" data-original-title="" title="">4</div>
    </div>
	<div class="row show-grid">
          <div class="span4" data-original-title="" title="">4</div>
          <div class="span5" data-original-title="" title="">5</div>
     </div>
	<div class="row show-grid">
           <div class="span9" data-original-title="" title="">9</div>
    </div>
    <h2>偏移列</h2>
	<div class="row show-grid">
           <div class="span4" data-original-title="" title="">4</div>
           <div class="span3 offset2">3 offset 2</div>
    </div>
 	<div class="row show-grid">
          <div class="span3 offset1" data-original-title="" title="">3 offset 1</div>
          <div class="span3 offset2">3 offset 2</div>
     </div>
	<div class="row show-grid">
           <div class="span6 offset3" data-original-title="" title="">6 offset 3</div>
    </div>
    <h2>嵌套列</h2>
	<div class="row show-grid">
            <div class="span9" data-original-title="" title="">
              	Level 1 column
              	<div class="row show-grid">
                	<div class="span6" data-original-title="" title="">Level 2</div>
                	<div class="span3">Level 2</div>
              	</div>
            </div>
    </div>
</section>
<!--  栅格系统示例 E -->
<!-- 流式栅格系统案例 S -->
<!-- 流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。 -->
<section>
	<h2>流式栅格系统案例</h2>
 	<div class="row-fluid show-grid">
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
          <div class="span1">1</div>
    </div> 
	<div class="row-fluid show-grid">
          <div class="span4">4</div>
          <div class="span4">4</div>
          <div class="span4">4</div>
    </div> 
 	<div class="row-fluid show-grid">
          <div class="span4">4</div>
          <div class="span8">8</div>
    </div>
	<div class="row-fluid show-grid">
          <div class="span6">6</div>
          <div class="span6">6</div>
    </div>
	<div class="row-fluid show-grid">
           <div class="span12">12</div>
    </div>
    <h2>流式栅格的偏移</h2>
	<div class="row-fluid show-grid">
          <div class="span4">4</div>
          <div class="span4 offset4">4 offset 4</div>
    </div>
	<div class="row-fluid show-grid">
          <div class="span3 offset3">3 offset 3</div>
          <div class="span3 offset3">3 offset 3</div>
    </div>
 	<div class="row-fluid show-grid">
           <div class="span6 offset6">6 offset 6</div>
    </div>
    <h2>流式嵌套布局</h2>
 	<div class="row-fluid show-grid">
            <div class="span12">Fluid 12
              	<div class="row-fluid show-grid">
                	<div class="span6">Fluid 6
                  		<div class="row-fluid show-grid">
                    		<div class="span6">Fluid 6</div>
                    		<div class="span6">Fluid 6</div>
                  		</div>
                	</div>
                	<div class="span6">Fluid 6</div>
              	</div>
            </div>
     </div>
</section>
<!-- 流式栅格系统案例 E -->
<!-- 表格 S -->
<section>
	<h2>表格默认样式</h2>
 	<table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
      </table>
      <h2>表格间隔颜色效果</h2>
      <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
       </table>
       <h2>表格加边框和圆角和跨行跨列效果</h2>
        <table class="table table-bordered">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwBootstrap</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
         </table>
          <h2>表格每行的鼠标悬浮事件</h2>
 		<table class="table table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
        </table>
        <h2>表格每个单元格的内补(padding)减半可使表格更紧凑</h2>
		<table class="table table-condensed">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
         </table>
         <h2>表格给行添加颜色</h2> 
 		<table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Product</th>
                  <th>Payment Taken</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                <tr class="success">
                  <td>1</td>
                  <td>TB - Monthly</td>
                  <td>01/04/2012</td>
                  <td>Approved</td>
                </tr>
                <tr class="error">
                  <td>2</td>
                  <td>TB - Monthly</td>
                  <td>02/04/2012</td>
                  <td>Declined</td>
                </tr>
                <tr class="warning">
                  <td>3</td>
                  <td>TB - Monthly</td>
                  <td>03/04/2012</td>
                  <td>Pending</td>
                </tr>
                <tr class="info">
                  <td>4</td>
                  <td>TB - Monthly</td>
                  <td>04/04/2012</td>
                  <td>Call in to confirm</td>
                </tr>
              </tbody>
        </table>       
</section>
<!-- 表格 E -->
<!-- 表单 S  -->
<section>
	<h2>表单默认样式</h2>
 	<form class="bs-docs-example">
            <fieldset>
              <legend>标题</legend>
              <label>标签名称</label>
              <input type="text" placeholder="更多…">
              <span class="help-block">这是BootStrap的实例.</span>
              <label class="checkbox">
                <input type="checkbox"> 点击我
              </label>
              <button class="btn" type="submit">提交</button>
            </fieldset>
    </form> 
    <h2>表单输入框圆角效果</h2> 
 	<form class="bs-docs-example form-search">
            <input type="text" class="input-medium search-query">
            <button class="btn" type="submit">查询</button>
    </form>
    <h2>表单排成一行</h2>
	<form class="bs-docs-example form-inline">
            <input type="text" placeholder="电子邮件" class="input-small">
            <input type="password" placeholder="用户密码" class="input-small">
            <label class="checkbox">
              <input type="checkbox"> 记住我
            </label>
            <button class="btn" type="submit">登 录</button>
    </form>
    <h2>表单排成多行</h2>
 	<form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label for="inputEmail" class="control-label">电子邮件</label>
              <div class="controls">
                <input type="text" placeholder="邮件地址" id="inputEmail">
              </div>
            </div>
            <div class="control-group">
              <label for="inputPassword" class="control-label">用户密码</label>
              <div class="controls">
                <input type="password" placeholder="密码" id="inputPassword">
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox"> 记住我
                </label>
                <button class="btn" type="submit">登 录</button>
              </div>
            </div>
     </form>
     <h2>表单的下拉框</h2>
	<form class="bs-docs-example">
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            <br>
            <select multiple="multiple">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
     </form>
     <h2>扩展表单前缀与后缀</h2>
	<form class="bs-docs-example">
            <div class="input-prepend">
              <span class="add-on">@</span>
              <input type="text" placeholder="用户名" id="prependedInput" class="span2">
            </div>
            <br>
            <div class="input-append">
              <input type="text" id="appendedInput" placeholder="输入金额" class="span2">
              <span class="add-on">.00</span>
            </div>
    </form>
    <h2>扩展表单前缀与后缀组合在一起</h2>
	<form class="bs-docs-example form-inline">
            <div class="input-prepend input-append">
              <span class="add-on">$</span>
              <input type="text" id="appendedPrependedInput" class="span2">
              <span class="add-on">.00</span>
            </div>
     </form>
     <h2>扩展表单加按钮</h2>
	<form class="bs-docs-example">
            <div class="input-append">
              <input type="text" id="appendedInputButton" class="span2">
              <button type="button" class="btn">滚!</button>
            </div>
     </form>
	<form class="bs-docs-example">
            <div class="input-append">
              <input type="text" id="appendedInputButtons" class="span2">
              <button type="button" class="btn">查询</button>
              <button type="button" class="btn">相关信息</button>
            </div>
     </form>   
     <h2>扩展表单下拉菜单</h2>
	<form class="bs-docs-example">
            <div class="input-append">
              <input type="text" id="appendedDropdownButton" class="span2">
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn dropdown-toggle">下拉按钮 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">小事件</a></li>
                  <li><a href="#">大事件</a></li>
                  <li><a href="#">超大事件</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割线</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-append -->
     </form>
	<form class="bs-docs-example">
            <div class="input-prepend">
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn dropdown-toggle">下拉按钮 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">小事件</a></li>
                  <li><a href="#">大事件</a></li>
                  <li><a href="#">超大事件</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割线</a></li>
                </ul>
              </div><!-- /btn-group -->
              <input type="text" id="prependedDropdownButton" class="span2">
            </div><!-- /input-prepend -->
    </form> 
	<form class="bs-docs-example">
            <div class="input-prepend input-append">
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn dropdown-toggle">下拉按钮 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">小事件</a></li>
                  <li><a href="#">大事件</a></li>
                  <li><a href="#">超大事件</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割线</a></li>
                </ul>
              </div><!-- /btn-group -->
              <input type="text" id="appendedPrependedDropdownButton" class="span2">
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn dropdown-toggle">下拉按钮 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">小事件</a></li>
                  <li><a href="#">大事件</a></li>
                  <li><a href="#">超大事件</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割线</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-prepend input-append -->
      </form> 
      <h2>扩展表单分段式下拉菜组</h2> 
	 <form class="bs-docs-example">
            <div class="input-prepend">
              <div class="btn-group">
                <button tabindex="-1" class="btn">下拉按钮</button>
                <button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">小事件</a></li>
                  <li><a href="#">大事件</a></li>
                  <li><a href="#">超大事件</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割线</a></li>
                </ul>
              </div>
              <input type="text">
            </div>
            <div class="input-append">
              <input type="text">
              <div class="btn-group">
                <button tabindex="-1" class="btn">下拉按钮</button>
                <button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">小事件</a></li>
                  <li><a href="#">大事件</a></li>
                  <li><a href="#">超大事件</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割线</a></li>
                </ul>
              </div>
            </div>
       </form> 
        <h2>扩展表单搜索表单</h2> 
		<form class="bs-docs-example form-search">
            <div class="input-append">
              <input type="text" class="span2 search-query">
              <button class="btn" type="submit">搜索</button>
            </div>
            <div class="input-prepend">
              <button class="btn" type="submit">搜索</button>
              <input type="text" class="span2 search-query">
            </div>
      </form>
      <h2>表单输入框布局</h2>
 	  <form style="padding-bottom: 15px;" class="bs-docs-example">
            <div class="controls">
              <input type="text" placeholder=".span5" class="span5">
            </div>
            <div class="controls controls-row">
              <input type="text" placeholder=".span4" class="span4">
              <input type="text" placeholder=".span1" class="span1">
            </div>
            <div class="controls controls-row">
              <input type="text" placeholder=".span3" class="span3">
              <input type="text" placeholder=".span2" class="span2">
            </div>
            <div class="controls controls-row">
              <input type="text" placeholder=".span2" class="span2">
              <input type="text" placeholder=".span3" class="span3">
            </div>
            <div class="controls controls-row">
              <input type="text" placeholder=".span1" class="span1">
              <input type="text" placeholder=".span4" class="span4">
            </div>
    </form>
    <h2>表单丰富多彩的颜色</h2>
	<form class="bs-docs-example form-horizontal">
            <div class="control-group warning">
              <label for="inputWarning" class="control-label">Input with warning</label>
              <div class="controls">
                <input type="text" id="inputWarning">
                <span class="help-inline">Something may have gone wrong</span>
              </div>
            </div>
            <div class="control-group error">
              <label for="inputError" class="control-label">Input with error</label>
              <div class="controls">
                <input type="text" id="inputError">
                <span class="help-inline">Please correct the error</span>
              </div>
            </div>
            <div class="control-group info">
              <label for="inputInfo" class="control-label">Input with info</label>
              <div class="controls">
                <input type="text" id="inputInfo">
                <span class="help-inline">Username is taken</span>
              </div>
            </div>
            <div class="control-group success">
              <label for="inputSuccess" class="control-label">Input with success</label>
              <div class="controls">
                <input type="text" id="inputSuccess">
                <span class="help-inline">Woohoo!</span>
              </div>
            </div>
      </form>        
</section>
<!-- 表单 E  -->
<!--  按钮 S -->
<section>
	<h2>按钮默认样式</h2>
	<table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>按钮</th>
                <th>class=""</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><button class="btn" type="button">默认</button></td>
                <td><code>btn</code></td>
                <td>带渐变的标准灰色按钮</td>
              </tr>
              <tr>
                <td><button class="btn btn-primary" type="button">主要</button></td>
                <td><code>btn btn-primary</code></td>
                <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
              </tr>
              <tr>
                <td><button class="btn btn-info" type="button">信息</button></td>
                <td><code>btn btn-info</code></td>
                <td>默认样式的替代样式</td>
              </tr>
              <tr>
                <td><button class="btn btn-success" type="button">成功</button></td>
                <td><code>btn btn-success</code></td>
                <td>表示成功或积极的动作</td>
              </tr>
              <tr>
                <td><button class="btn btn-warning" type="button">警告</button></td>
                <td><code>btn btn-warning</code></td>
                <td>提醒应该谨慎采取这个动作</td>
              </tr>
              <tr>
                <td><button class="btn btn-danger" type="button">危险</button></td>
                <td><code>btn btn-danger</code></td>
                <td>表示这个动作危险或存在危险</td>
              </tr>
              <tr>
                <td><button class="btn btn-inverse" type="button">反向</button></td>
                <td><code>btn btn-inverse</code></td>
                <td>备用的暗灰色按钮，不依赖于语义和用途</td>
              </tr>
              <tr>
                <td><button class="btn btn-link" type="button">链接</button></td>
                <td><code>btn btn-link</code></td>
                <td>简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为</td>
              </tr>
            </tbody>
     </table>
     <h2>按钮大小</h2>
 	 <div class="bs-docs-example">
            <p>
              <button class="btn btn-large btn-primary" type="button">Large button</button>
              <button class="btn btn-large" type="button">Large button</button>
            </p>
            <p>
              <button class="btn btn-primary" type="button">Default button</button>
              <button class="btn" type="button">Default button</button>
            </p>
            <p>
              <button class="btn btn-small btn-primary" type="button">Small button</button>
              <button class="btn btn-small" type="button">Small button</button>
            </p>
            <p>
              <button class="btn btn-mini btn-primary" type="button">Mini button</button>
              <button class="btn btn-mini" type="button">Mini button</button>
            </p>
      </div>
      <h2>变成块级(Block)按钮</h2>
	 <div class="bs-docs-example">
            <div style="max-width: 400px; margin: 0 auto 10px;" class="well">
              <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
              <button class="btn btn-large btn-block" type="button">Block level button</button>
            </div>
     </div>
</section>
<!--  按钮 E -->
<!-- 图片 S -->
<section>
	<h2>图片默认</h2>
	<div class="bs-docs-example bs-docs-example-images">
            <img class="img-rounded" data-src="holder.js/140x140" alt="140x140" style="width: 140px; height: 140px;" src="img/1.jpg">
            <img class="img-circle" data-src="holder.js/140x140" alt="140x140" style="width: 140px; height: 140px;" src="img/2.jpg">
            <img class="img-polaroid" data-src="holder.js/140x140" alt="140x140" style="width: 140px; height: 140px;" src="img/3.jpg">
     </div>
     <h2>图标案例</h2>
	 <div class="bs-docs-example">
            <div class="btn-toolbar">
              <div class="btn-group">
                <a href="#" class="btn"><i class="icon-align-left"></i></a>
                <a href="#" class="btn"><i class="icon-align-center"></i></a>
                <a href="#" class="btn"><i class="icon-align-right"></i></a>
                <a href="#" class="btn"><i class="icon-align-justify"></i></a>
              </div>
            </div>
     </div>
     <h2>图标案例按钮组中下拉菜单</h2>
 	<div class="bs-docs-example">
            <div class="btn-group">
              <a href="#" class="btn btn-primary"><i class="icon-user icon-white"></i> User</a>
              <a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
                <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
                <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="i"></i> Make admin</a></li>
              </ul>
            </div>
     </div>
     <h2>图标案例导航</h2>
	<div class="bs-docs-example">
            <div style="padding: 8px 0; margin-bottom: 0;" class="well">
              <ul class="nav nav-list">
                <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li>
                <li><a href="#"><i class="icon-book"></i> 存档</a></li>
                <li><a href="#"><i class="icon-pencil"></i> 应用程序</a></li>
                <li><a href="#"><i class="i"></i> Misc</a></li>
              </ul>
            </div>
    </div>
    <h2>图标案例表单域</h2>
	<form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label for="inputIcon" class="control-label">电子邮件</label>
              <div class="controls">
                <div class="input-prepend">
                  <span class="add-on"><i class="icon-envelope"></i></span><input type="text" id="inputIcon" class="span2">
                </div>
              </div>
            </div>
    </form>
</section>
<!-- 图片 E -->
<!-- 实际案例 S -->
<section>
	<h2>下拉菜单的子菜单</h2>
	<div class="bs-docs-example bs-docs-example-submenus">
            <div class="pull-left" style="margin-right:40px;">
              <p class="muted">默认样式</p>
              <div class="dropdown clearfix">
                <ul aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu">
                  <li><a href="#" tabindex="-1">Action</a></li>
                  <li><a href="#" tabindex="-1">Another action</a></li>
                  <li><a href="#" tabindex="-1">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-submenu">
                    <a href="#" tabindex="-1">More options</a>
                    <ul class="dropdown-menu">
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
            <div class="pull-left" style="margin-right:40px;">
              <p class="muted">向上弹出的子菜单</p>
              <div class="dropup">
                <ul aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu">
                  <li><a href="#" tabindex="-1">Action</a></li>
                  <li><a href="#" tabindex="-1">Another action</a></li>
                  <li><a href="#" tabindex="-1">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-submenu">
                    <a href="#" tabindex="-1">More options</a>
                    <ul class="dropdown-menu">
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
            <div class="pull-left" style="margin-right:40px;">
              <p class="muted">左侧弹出的子菜单</p>
              <div class="dropdown">
                <ul aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu">
                  <li><a href="#" tabindex="-1">Action</a></li>
                  <li><a href="#" tabindex="-1">Another action</a></li>
                  <li><a href="#" tabindex="-1">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-submenu pull-left">
                    <a href="#" tabindex="-1">More options</a>
                    <ul class="dropdown-menu">
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                      <li><a href="#" tabindex="-1">Second level link</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
      </div>
      <h2>单一按钮组</h2>
	 <div class="bs-docs-example">
            <div style="margin: 9px 0 5px;" class="btn-group">
              <button class="btn">Left</button>
              <button class="btn">Middle</button>
              <button class="btn">Right</button>
            </div>
      </div>
      <h2>多维按钮组</h2>
     <div class="bs-docs-example">
            <div style="margin: 0;" class="btn-toolbar">
              <div class="btn-group">
                <button class="btn">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
                <button class="btn">4</button>
              </div>
              <div class="btn-group">
                <button class="btn">5</button>
                <button class="btn">6</button>
                <button class="btn">7</button>
              </div>
              <div class="btn-group">
                <button class="btn">8</button>
              </div>
            </div>
      </div>
       <h2>垂直按钮组</h2>
 	  <div class="bs-docs-example">
            <div class="btn-group btn-group-vertical">
              <button class="btn" type="button"><i class="icon-align-left"></i></button>
              <button class="btn" type="button"><i class="icon-align-center"></i></button>
              <button class="btn" type="button"><i class="icon-align-right"></i></button>
              <button class="btn" type="button"><i class="icon-align-justify"></i></button>
            </div>
       </div>
       <h2>各种颜色的下拉框</h2>
 		<div class="bs-docs-example">
            <div style="margin: 0;" class="btn-toolbar">
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Danger <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div><!-- /btn-toolbar -->
       </div>
       <h2>各种颜色的分裂式按钮下拉菜单</h2>
		<div class="bs-docs-example">
            <div style="margin: 0;" class="btn-toolbar">
              <div class="btn-group">
                <button class="btn">Action</button>
                <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-primary">Action</button>
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-danger">Danger</button>
                <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-warning">Warning</button>
                <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-success">Success</button>
                <button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-info">Info</button>
                <button data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-inverse">Inverse</button>
                <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div><!-- /btn-toolbar -->
        </div>
        <h2>向上弹出式菜单</h2>
 		<div class="bs-docs-example">
            <div style="margin: 0;" class="btn-toolbar">
              <div class="btn-group dropup">
                <button class="btn">Dropup</button>
                <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group dropup">
                <button class="btn primary">Right dropup</button>
                <button data-toggle="dropdown" class="btn primary dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu pull-right">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div>
        </div>
        <h2>基本标签页</h2>
 		<div class="bs-docs-example">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#">首页</a></li>
              <li><a href="#">文件</a></li>
              <li><a href="#">信息</a></li>
            </ul>
        </div>
        <h2>基本pills</h2>
 		<div class="bs-docs-example">
            <ul class="nav nav-pills">
              <li class="active"><a href="#">首页</a></li>
              <li><a href="#">文件</a></li>
              <li><a href="#">信息</a></li>
            </ul>
       </div>
       <h2>堆叠式排列的标签页</h2>
 		<div class="bs-docs-example">
            <ul class="nav nav-tabs nav-stacked">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">文件</a></li>
              <li><a href="#">信息</a></li>
            </ul>
        </div>
        <h2>堆叠式排列的pills</h2>
		<div class="bs-docs-example">
            <ul class="nav nav-pills nav-stacked">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">文件</a></li>
              <li><a href="#">信息</a></li>
            </ul>
        </div>
        <h2>标签页带下拉框</h2>
  		<div class="bs-docs-example">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#">首页</a></li>
              <li><a href="#">帮助</a></li>
              <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉框 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
         </div>
        <h2>超强导航条</h2>
 		<div class="bs-docs-example">
            <div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a href="#" class="brand">标题</a>
                  <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                      <li class="active"><a href="#">首页</a></li>
                      <li><a href="#">链接1</a></li>
                      <li><a href="#">链接2</a></li>
                      <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉框 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li class="nav-header">Nav header</li>
                          <li><a href="#">Separated link</a></li>
                          <li><a href="#">One more separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                    <form action="" class="navbar-search pull-left">
                      <input type="text" placeholder="查询" class="search-query span2">
                    </form>
                    <ul class="nav pull-right">
                      <li><a href="#">链接3</a></li>
                      <li class="divider-vertical"></li>
                      <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉框 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!-- /.nav-collapse -->
                </div>
              </div><!-- /navbar-inner -->
            </div><!-- /navbar -->
        </div>
        <h2>反色超强导航条</h2>
 		<div class="bs-docs-example">
            <div style="position: static;" class="navbar navbar-inverse">
              <div class="navbar-inner">
                <div class="container">
                  <a data-target=".navbar-inverse-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a href="#" class="brand">标题</a>
                  <div class="nav-collapse collapse navbar-inverse-collapse">
                    <ul class="nav">
                      <li class="active"><a href="#">首页</a></li>
                      <li><a href="#">链接1</a></li>
                      <li><a href="#">链接2</a></li>
                      <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉框 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li class="nav-header">Nav header</li>
                          <li><a href="#">Separated link</a></li>
                          <li><a href="#">One more separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                    <form action="" class="navbar-search pull-left">
                      <input type="text" placeholder="查询" class="search-query span2">
                    </form>
                    <ul class="nav pull-right">
                      <li><a href="#">链接3</a></li>
                      <li class="divider-vertical"></li>
                      <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉框 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!-- /.nav-collapse -->
                </div>
              </div><!-- /navbar-inner -->
            </div><!-- /navbar -->
          </div>
          <h2>面包屑</h2>
		 <div class="bs-docs-example">
            <ul class="breadcrumb">
              <li class="active">首页</li>
            </ul>
            <ul class="breadcrumb">
              <li><a href="#">首页</a> <span class="divider">/</span></li>
              <li class="active">类库</li>
            </ul>
            <ul style="margin-bottom: 5px;" class="breadcrumb">
              <li><a href="#">首页</a> <span class="divider">/</span></li>
              <li><a href="#">类库</a> <span class="divider">/</span></li>
              <li class="active">数据</li>
            </ul>
          </div>
         <h2>分页条居左</h2>
 		<div class="bs-docs-example">
            <div class="pagination">
              <ul>
                <li><a href="#">«</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
              </ul>
          	</div>
          </div>
         <h2>分页条居中</h2>
		<div class="bs-docs-example">
            <div class="pagination pagination-centered">
              <ul>
                <li class="disabled"><a href="#">«</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
             </ul>
            </div>
          </div>         
         <h2>分页条居右</h2>
     	<div class="bs-docs-example">
                <div class="pagination pagination-right">
                  <ul>
                    <li><a href="#">«</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">»</a></li>
                  </ul>
                </div>
         </div>
         <h2>翻页</h2>
		<div class="bs-docs-example">
            <ul class="pager">
              <li><a href="#">前一页</a></li>
              <li><a href="#">后一页</a></li>
            </ul>
          </div>
		<div class="bs-docs-example">
            <ul class="pager">
              <li class="previous"><a href="#">← Older</a></li>
              <li class="next"><a href="#">Newer →</a></li>
            </ul>
          </div>
          <h2>标签</h2>
 		 <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>标签</th>
                <th>标记</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <span class="label">默认样式</span>
                </td>
                <td>
                  <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="label label-success">成功</span>
                </td>
                <td>
                  <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="label label-warning">警告</span>
                </td>
                <td>
                  <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="label label-important">重要</span>
                </td>
                <td>
                  <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="label label-info">信息</span>
                </td>
                <td>
                  <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="label label-inverse">反色</span>
                </td>
                <td>
                  <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
                </td>
              </tr>
            </tbody>
          </table>
          <h2>徽章</h2>
 		<table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>名称</th>
                <th>案例</th>
                <th>标记</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  默认样式
                </td>
                <td>
                  <span class="badge">1</span>
                </td>
                <td>
                  <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  成功
                </td>
                <td>
                  <span class="badge badge-success">2</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  警告
                </td>
                <td>
                  <span class="badge badge-warning">4</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  重要
                </td>
                <td>
                  <span class="badge badge-important">6</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  信息
                </td>
                <td>
                  <span class="badge badge-info">8</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
                </td>
              </tr>
              <tr>
                <td>
                  反色
                </td>
                <td>
                  <span class="badge badge-inverse">10</span>
                </td>
                <td>
                  <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
                </td>
              </tr>
            </tbody>
          </table>
          <h2>警告提示</h2>
		 <div class="bs-docs-example">
            <div class="alert">
              <button data-dismiss="alert" class="close" type="button">×</button>
              <strong>Warning!</strong> Best check yo self, you're not looking too good.
            </div>
          </div>
          <h2>错误或危险提示</h2>
		  <div class="bs-docs-example">
            <div class="alert alert-error">
              <button data-dismiss="alert" class="close" type="button">×</button>
              <strong>Oh snap!</strong> Change a few things up and try submitting again.
            </div>
          </div>          
          <h2>成功提示</h2>
 		<div class="bs-docs-example">
            <div class="alert alert-success">
              <button data-dismiss="alert" class="close" type="button">×</button>
              <strong>Well done!</strong> You successfully read this important alert message.
            </div>
          </div>         
          <h2>警告提示</h2>
 		<div class="bs-docs-example">
            <div class="alert alert-info">
              <button data-dismiss="alert" class="close" type="button">×</button>
              <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
            </div>
          </div>  
          <h2>进度条基本样式</h2>
 			<div class="bs-docs-example">
            <div class="progress">
              <div style="width: 60%;" class="bar"></div>
            </div>
          </div>           
         <h2>进度条动画样式</h2>
		<div class="bs-docs-example">
            <div class="progress progress-striped">
              <div style="width: 20%;" class="bar"></div>
            </div>
          </div>         
         <h2>进度条堆叠样式</h2>
 		<div class="bs-docs-example">
            <div class="progress">
              <div style="width: 35%" class="bar bar-success"></div>
              <div style="width: 20%" class="bar bar-warning"></div>
              <div style="width: 10%" class="bar bar-danger"></div>
            </div>
          </div> 
          <h2>进度条更多颜色的选择</h2>
 		<div class="bs-docs-example">
            <div style="margin-bottom: 9px;" class="progress progress-info">
              <div style="width: 20%" class="bar"></div>
            </div>
            <div style="margin-bottom: 9px;" class="progress progress-success">
              <div style="width: 40%" class="bar"></div>
            </div>
            <div style="margin-bottom: 9px;" class="progress progress-warning">
              <div style="width: 60%" class="bar"></div>
            </div>
            <div class="progress progress-danger">
              <div style="width: 80%" class="bar"></div>
            </div>
          </div>
          <h2>进度条更多动画的选择</h2> 
 			<div class="bs-docs-example">
            <div style="margin-bottom: 9px;" class="progress progress-info progress-striped">
              <div style="width: 20%" class="bar"></div>
            </div>
            <div style="margin-bottom: 9px;" class="progress progress-success progress-striped">
              <div style="width: 40%" class="bar"></div>
            </div>
            <div style="margin-bottom: 9px;" class="progress progress-warning progress-striped">
              <div style="width: 60%" class="bar"></div>
            </div>
            <div class="progress progress-danger progress-striped">
              <div style="width: 80%" class="bar"></div>
            </div>
          </div> 
</section>
<!-- 实际案例 E -->
</body>
</html>
